<template>
  <view class="container">
    <!-- 顶部banner区 -->
    <view class="banner-area">
      <swiper class="banner-swiper" circular autoplay indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image class="banner-img" :src="item.image" mode="aspectFill"></image>
          <view class="banner-info">
            <text class="banner-title">{{ item.title }}</text>
            <text class="banner-desc">{{ item.desc }}</text>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能模块区 -->
    <view class="function-area">
      <view
        class="function-item"
        v-for="(item, index) in functionList"
        :key="index"
        @touchstart="onFunctionTouchStart(index)"
        @touchend="onFunctionTouchEnd(index)"
        @touchcancel="onFunctionTouchEnd(index)"
        :class="{ 'function-item-active': activeFunctionIndex === index }"
      >
        <view class="function-icon-wrapper" :class="'bg-' + item.type">
          <text class="iconfont" :class="item.icon"></text>
        </view>
        <text class="function-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 合作景区区 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">合作景区</text>
        <view class="view-all">
          <text>查看全部</text>
          <text class="arrow">></text>
        </view>
      </view>
      <scroll-view
        class="partners-scroll"
        scroll-x
        show-scrollbar="false"
        :scroll-left="scrollLeft"
        @scroll="onPartnerScroll"
        @touchstart="onScrollTouchStart"
        @touchend="onScrollTouchEnd"
      >
        <view
          class="partner-item"
          v-for="(item, index) in partnerList"
          :key="index"
          @touchstart="onPartnerTouchStart(index)"
          @touchend="onPartnerTouchEnd(index)"
          @touchcancel="onPartnerTouchEnd(index)"
          :class="{ 'partner-item-active': activePartnerIndex === index }"
          @click="viewPartner(item)"
        >
          <image class="partner-img" :src="item.image" mode="aspectFill"></image>
          <text class="partner-name">{{ item.name }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 热门路线 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门路线</text>
        <view class="view-all">
          <text>查看全部</text>
          <text class="arrow">></text>
        </view>
      </view>
      <view class="route-list">
        <view
          class="route-item"
          v-for="(item, index) in routeList"
          :key="index"
          @touchstart="onRouteTouchStart(index)"
          @touchend="onRouteTouchEnd(index)"
          @touchcancel="onRouteTouchEnd(index)"
          :class="{ 'route-item-active': activeRouteIndex === index }"
          @click="viewRoute(item)"
        >
          <image class="route-img" :src="item.image" mode="aspectFill"></image>
          <view class="route-tag" :class="'tag-' + item.level">{{ getLevelText(item.level) }}</view>
          <view class="route-info">
            <text class="route-name">{{ item.name }}</text>
            <text class="route-desc">{{ item.description }}</text>
            <view class="route-bottom">
              <text class="route-price">¥{{ item.price }}起</text>
              <view
                class="book-btn"
                @touchstart.stop="onBookTouchStart(index)"
                @touchend.stop="onBookTouchEnd(index)"
                @touchcancel.stop="onBookTouchEnd(index)"
                :class="{ 'book-btn-active': activeBookIndex === index }"
              >
                <text>立即预订</text>
              </view>
            </view>
          </view>
          <view class="route-time">{{ item.duration }}分钟</view>
        </view>
      </view>
    </view>

    <!-- 票务平台选择弹窗 -->
    <view class="ticket-dialog" v-if="showTicketDialog" @tap="showTicketDialog = false">
      <view class="dialog-content" @tap.stop>
        <view class="dialog-header">
          <text class="dialog-title">选择购票平台</text>
          <text class="dialog-close iconfont icon-close" @tap="showTicketDialog = false"></text>
        </view>
        <view class="platform-list">
          <view class="platform-item" v-for="(item, index) in ticketPlatforms" :key="index" @tap="openPlatform(item)">
            <view class="platform-icon-wrap" :style="{ backgroundColor: item.color + '10' }">
              <text class="platform-icon iconfont" :class="item.icon" :style="{ color: item.color }"></text>
            </view>
            <text class="platform-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeFunctionIndex: -1,
      activePartnerIndex: -1,
      activeRouteIndex: -1,
      activeBookIndex: -1,
      // --- Start of new data for auto-scroll ---
      scrollLeft: 0,
      scrollTimer: null,
      autoScrollTimeout: null,
      scrollDirection: 'right',
      maxScrollLeft: 0,
      userInteracting: false, // Flag for user touch interaction
      // --- End of new data for auto-scroll ---
      bannerList: [
        {
          title: '张家界空中之旅',
          desc: '尽览凤凰古城全景',
          image: 'https://img.cc0.cn/pixabay/2019103116505132300.jpg!cc0.cn.jpg'
        },
        {
          title: '安徽黄山云海',
          desc: '云海日出 壮丽风景',
          image: 'https://img.cc0.cn/pixabay/2019102902505232707.jpg!cc0.cn.jpg'
        },
        {
          title: '昆明大理古城',
          desc: '探索云南特色文化',
          image: 'https://img.cc0.cn/pixabay/20191020022740807.jpg!cc0.cn.jpg'
        }
      ],
      functionList: [
        {
          name: '攻略',
          icon: 'icon-gonglve',
          type: 'guide'
        },
        {
          name: '票务',
          icon: 'icon-piaowu',
          type: 'ticket'
        },
        {
          name: '路线',
          icon: 'icon-luxian',
          type: 'route'
        },
        {
          name: '周边',
          icon: 'icon-zhoubian',
          type: 'nearby'
        }
      ],
      partnerList: [
        {
          name: '云南',
          image: 'https://img.cc0.cn/pixabay/2019101901273312633.jpg!cc0.cn.jpg'
        },
        {
          name: '四川',
          image: 'https://img.cc0.cn/pixabay/2019101903482830864.jpg!cc0.cn.jpg'
        },
        {
          name: '山东',
          image: 'https://img.cc0.cn/pixabay/2019102217523820200.jpg!cc0.cn.jpg'
        },
        {
          name: '贵州',
          image: 'https://img.cc0.cn/pixabay/201910190106529976.jpg!cc0.cn.jpg'
        },
        {
          name: '安徽',
          image: 'https://img.cc0.cn/pixabay/2019102100302718085.jpg!cc0.cn.jpg'
        },
        {
          name: '江苏',
          image: 'https://img.cc0.cn/pixabay/2019102009455659737.jpg!cc0.cn.jpg'
        }
      ],
      routeList: [
        {
          name: '九寨沟空中观光之旅',
          image: 'https://img.cc0.cn/pixabay/2019102223534966129.jpg!cc0.cn.jpg',
          duration: '30',
          level: 'short',
          description: '朝揽五彩池，近日尽览布等海点',
          price: '598'
        },
        {
          name: '张家界峰林飞行体验',
          image: 'https://img.cc0.cn/pixabay/2019102221205646893.jpg!cc0.cn.jpg',
          duration: '45',
          level: 'medium',
          description: '穿越天门山，探索界碑壮观景区',
          price: '699'
        },
        {
          name: '黄山云海日出专线',
          image: 'https://img.cc0.cn/pixabay/2019102903500340526.jpg!cc0.cn.jpg',
          duration: '60',
          level: 'long',
          description: '体验云海日出，飞越黄山主峰',
          price: '799'
        }
      ],
      showTicketDialog: false,
      ticketPlatforms: [
        {
          name: '美团',
          icon: 'icon-meituan1',
          color: '#FFC300',
          url: 'meituan://',
          webUrl: 'https://i.meituan.com/',
          // 美团团购小程序路径
          mpPath: {
            appId: 'wxde8ac0a21135c07d',
            path: '/index/pages/merchant/index?shopId=YOUR_SHOP_ID' // 替换为实际的商家ID
          }
        },
        {
          name: '抖音',
          icon: 'icon-douyin',
          color: '#150c19',
          url: 'snssdk1128://user/profile/1106581417381786', // 替换为实际的抖音用户ID
          webUrl: 'https://www.douyin.com/user/1106581417381786', // 替换为实际的抖音用户ID
          // 抖音小程序路径
          mpPath: {
            appId: 'tt9eb3485c442f79b0',
            path: 'pages/user/index?uid=1106581417381786' // 替换为实际的抖音用户ID
          }
        },
        {
          name: '小红书',
          icon: 'icon-xiaohongshu',
          color: '#FE2C55',
          url: 'xhsdiscover://user/680dc58f000000000e013e69', // 替换为实际的小红书用户ID
          webUrl: 'https://www.xiaohongshu.com/user/profile/680dc58f000000000e013e69', // 替换为实际的小红书用户ID
          // 小红书小程序路径
          mpPath: {
            appId: 'wxb296433268a1c654',
            path: 'pages/user/index?userId=680dc58f000000000e013e69' // 替换为实际的小红书用户ID
          }
        }
      ]
    };
  },
  onReady() {
    // Wait 3 seconds then start auto-scrolling
    this.autoScrollTimeout = setTimeout(() => {
      this.startAutoScroll();
    }, 3000);
  },
  onShow() {
    // 页面显示时，如果用户没有在交互，则恢复自动滚动
    if (!this.userInteracting) {
      this.autoScrollTimeout = setTimeout(() => {
        this.startAutoScroll();
      }, 1500); // 延迟1.5秒后恢复
    }
  },
  onHide() {
    // Clear timers when page is hidden
    clearTimeout(this.autoScrollTimeout);
    clearInterval(this.scrollTimer);
  },
  onUnload() {
    // Clear timers when page is unloaded
    clearTimeout(this.autoScrollTimeout);
    clearInterval(this.scrollTimer);
  },
  methods: {
    // 功能模块触摸开始
    onFunctionTouchStart(index) {
      this.activeFunctionIndex = index;
    },

    // 功能模块触摸结束
    onFunctionTouchEnd(index) {
      setTimeout(() => {
        this.activeFunctionIndex = -1;
      }, 100);

      this.handleFunction(this.functionList[index].type);
    },

    // 合作景区触摸开始
    onPartnerTouchStart(index) {
      this.activePartnerIndex = index;
    },

    // 合作景区触摸结束
    onPartnerTouchEnd(index) {
      setTimeout(() => {
        this.activePartnerIndex = -1;
      }, 100);
    },

    // 热门路线触摸开始
    onRouteTouchStart(index) {
      this.activeRouteIndex = index;
    },

    // 热门路线触摸结束
    onRouteTouchEnd(index) {
      setTimeout(() => {
        this.activeRouteIndex = -1;
      }, 100);
    },

    // 预订按钮触摸开始
    onBookTouchStart(index) {
      this.activeBookIndex = index;
    },

    // 预订按钮触摸结束
    onBookTouchEnd(index) {
      setTimeout(() => {
        this.activeBookIndex = -1;
      }, 100);

      uni.showToast({
        title: '预订' + this.routeList[index].name,
        icon: 'none'
      });
    },

    handleFunction(type) {
      switch (type) {
        case 'guide':
          uni.navigateTo({
            url: '/subPackages/guide/pages/index'
          });
          break;
        case 'route':
          uni.navigateTo({
            url: '/subPackages/route/pages/index'
          });
          break;
        case 'ticket':
          // #ifdef MP-WEIXIN
          // 微信小程序环境下直接打开美团团购小程序
          uni.navigateToMiniProgram({
            appId: 'wxde8ac0a21135c07d', // 美团团购小程序的appId
            path: '/index/pages/index/index', // 美团团购小程序首页路径
            success(res) {
              console.log('打开美团团购小程序成功');
            },
            fail(err) {
              console.error('打开美团团购小程序失败', err);
              uni.showToast({
                title: '打开美团团购小程序失败',
                icon: 'none'
              });
            }
          });
          // #endif

          // #ifdef APP-PLUS
          // APP环境下显示选择弹窗
          this.showTicketDialog = true;
          // #endif
          break;
        default:
          uni.showToast({
            // title: '点击了' + type,
            title: '周边功能开发中',
            icon: 'none'
          });
      }
    },
    viewPartner(item) {
      uni.showToast({
        title: '查看' + item.name + '景区',
        icon: 'none'
      });
    },
    viewRoute(item) {
      uni.showToast({
        title: '查看' + item.name,
        icon: 'none'
      });
    },
    getLevelText(level) {
      const levelTexts = {
        short: '短途',
        medium: '中程',
        long: '长途'
      };
      return levelTexts[level] || level;
    },
    openPlatform(platform) {
      // #ifdef MP-WEIXIN
      // 微信小程序环境下
      uni.navigateToMiniProgram({
        appId: platform.mpPath.appId,
        path: platform.mpPath.path,
        success(res) {
          console.log(`打开${platform.name}小程序成功`);
        },
        fail(err) {
          console.error(`打开${platform.name}小程序失败`, err);
          // 如果小程序跳转失败，尝试打开网页版
          plus.runtime.openURL(platform.webUrl, (err) => {
            if (err) {
              uni.showToast({
                title: `打开${platform.name}失败`,
                icon: 'none'
              });
            }
          });
        }
      });
      // #endif

      // #ifdef APP-PLUS
      // APP环境下尝试打开应用
      plus.runtime.openURL(platform.url, (err) => {
        if (err) {
          // 如果打开应用失败，尝试打开网页版
          plus.runtime.openURL(platform.webUrl, (err) => {
            if (err) {
              uni.showModal({
                title: '提示',
                content: `未安装${platform.name}，是否前往下载？`,
                success: (res) => {
                  if (res.confirm) {
                    switch (platform.name) {
                      case '美团':
                        plus.runtime.openURL('https://i.meituan.com/');
                        break;
                      case '抖音':
                        plus.runtime.openURL('https://www.douyin.com/download');
                        break;
                      case '小红书':
                        plus.runtime.openURL('https://www.xiaohongshu.com/app');
                        break;
                    }
                  }
                }
              });
            }
          });
        }
      });
      // #endif

      this.showTicketDialog = false;
    },

    // --- Start of new methods for auto-scroll ---
    startAutoScroll() {
      if (this.userInteracting) return;

      // 添加延迟，确保DOM元素已完全渲染
      setTimeout(() => {
        try {
          const query = uni.createSelectorQuery().in(this);
          query.select('.partners-scroll').boundingClientRect();
          query.selectAll('.partner-item').fields({ rect: true, size: true });

          query.exec((data) => {
            console.log('查询结果:', JSON.stringify(data));

            if (!data || data.length < 2) {
              console.error('查询结果不完整:', data);
              return;
            }

            if (!data[0]) {
              console.error('未找到滚动容器');
              return;
            }

            if (!data[1] || !Array.isArray(data[1]) || data[1].length === 0) {
              console.error('未找到合作伙伴项目');
              return;
            }

            const containerWidth = data[0].width;
            const marginRightPx = uni.upx2px(20);
            let totalContentWidth = 0;

            data[1].forEach((item, index) => {
              totalContentWidth += item.width;
              if (index < data[1].length - 1) {
                totalContentWidth += marginRightPx;
              }
            });

            this.maxScrollLeft = totalContentWidth - containerWidth;

            if (this.maxScrollLeft > 0) {
              clearInterval(this.scrollTimer);
              this.scrollTimer = setInterval(() => {
                if (this.userInteracting) {
                  clearInterval(this.scrollTimer);
                  return;
                }

                if (this.scrollDirection === 'right') {
                  this.scrollLeft += 1;
                  if (this.scrollLeft >= this.maxScrollLeft) {
                    this.scrollLeft = this.maxScrollLeft;
                    this.scrollDirection = 'left';
                  }
                } else {
                  this.scrollLeft -= 1;
                  if (this.scrollLeft <= 0) {
                    this.scrollLeft = 0;
                    this.scrollDirection = 'right';
                  }
                }
              }, 30);
            }
          });
        } catch (error) {
          console.error('自动滚动初始化错误:', error);
        }
      }, 300); // 给300ms延迟确保DOM已渲染
    },

    onScrollTouchStart() {
      this.userInteracting = true;
      clearTimeout(this.autoScrollTimeout);
      clearInterval(this.scrollTimer);
    },

    onScrollTouchEnd() {
      this.userInteracting = false;
      this.autoScrollTimeout = setTimeout(() => {
        this.startAutoScroll();
      }, 5000);
    },

    onPartnerScroll(e) {
      if (this.userInteracting) {
        this.scrollLeft = e.detail.scrollLeft;
      }
    }
    // --- End of new methods for auto-scroll ---
  }
};
</script>

<style lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* Banner区域样式 */
.banner-area {
  position: relative;
  width: 100%;
  height: 420rpx;
}

.banner-swiper {
  width: 100%;
  height: 100%;
}

.banner-img {
  width: 100%;
  height: 100%;
}

.banner-info {
  position: absolute;
  left: 30rpx;
  bottom: 40rpx;
}

.banner-title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  display: block;
}

.banner-desc {
  color: #fff;
  font-size: 28rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

/* 功能模块样式 */
.function-area {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  margin: 0 30rpx;
  border-radius: 20rpx;
  margin-top: -40rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  transition: transform 0.15s ease;
  z-index: 1;
}

.function-item-active {
  transform: scale(0.92);
}

.function-icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15rpx;
  position: relative;
  overflow: hidden;
}
.function-icon-wrapper .iconfont {
  font-size: 50rpx;
  color: #fff;
}

.function-icon-wrapper:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.function-item-active .function-icon-wrapper:after {
  animation: ripple 0.4s ease-out;
}

@keyframes ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  to {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.function-icon {
  font-size: 36rpx;
  color: #fff;
}

.function-name {
  font-size: 26rpx;
  color: #333;
  transition: color 0.2s ease;
}

.function-item-active .function-name {
  color: #1989fa;
}

.bg-guide {
  background-color: #7cb8ff;
}

.bg-ticket {
  background-color: #72e0a1;
}

.bg-route {
  background-color: #ffb74a;
}

.bg-nearby {
  background-color: #b490ff;
}

/* 通用板块样式 */
.section {
  margin-top: 30rpx;
  padding: 0 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 26rpx;
  color: #1455ff;
  display: flex;
  align-items: center;
}

.arrow {
  margin-left: 4rpx;
}

/* 合作景区样式 */
.partners-scroll {
  white-space: nowrap;
}

.partner-item {
  display: inline-block;
  width: 200rpx;
  margin-right: 20rpx;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s;
  z-index: 1;
}

.partner-item-active {
  transform: scale(0.95);
  opacity: 0.85;
}

.partner-img {
  width: 100%;
  height: 150rpx;
  border-radius: 10rpx;
  position: relative;
  overflow: hidden;
}

.partner-name {
  position: absolute;
  left: 10rpx;
  bottom: 10rpx;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

/* 热门路线样式 */
.route-list {
  margin-top: 20rpx;
}

.route-item {
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  position: relative;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.route-item-active {
  transform: translateY(2rpx) scale(0.99);
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.03);
}

.route-img {
  width: 100%;
  height: 300rpx;
  position: relative;
  overflow: hidden;
}

.route-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.route-item-active .route-img::after {
  opacity: 1;
  animation: route-image-pulse 0.4s ease-out;
}

@keyframes route-image-pulse {
  from {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  to {
    opacity: 0;
  }
}

.route-tag {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  color: #fff;
  font-size: 24rpx;
}

.tag-short {
  background-color: #4cd964;
}

.tag-medium {
  background-color: #1989fa;
}

.tag-long {
  background-color: #ff9500;
}

.route-info {
  padding: 20rpx;
}

.route-name {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
  transition: color 0.2s ease;
}

.route-item-active .route-name {
  color: #1989fa;
}

.route-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.route-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-price {
  color: #ff6b00;
  font-size: 32rpx;
  font-weight: bold;
}

.book-btn {
  background-color: #1989fa;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.book-btn:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.book-btn-active {
  background-color: #0e7fe9;
}

.book-btn-active:after {
  animation: btn-ripple 0.4s ease-out;
}

@keyframes btn-ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  to {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.route-time {
  position: absolute;
  top: 240rpx;
  right: 10rpx;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  color: #666;
  font-size: 24rpx;
}

/* 票务平台选择弹窗样式 */
.ticket-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.dialog-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  transform: scale(0.8);
  opacity: 0;
  animation: scaleIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.dialog-close {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.platform-list {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 20rpx;
}

.platform-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  transition: transform 0.2s ease;

  &:active {
    transform: scale(0.95);
  }
}

.platform-icon-wrap {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}

.platform-icon {
  font-size: 50rpx;
}

.platform-name {
  font-size: 26rpx;
  color: #333;
}
</style>
